<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<script src="layui/layui.js"></script>

<body>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">

    </div>
    <div class="layui-col-md6">
        <h4>&nbsp;</h4>
        <h1 style="text-align: center">添加商品信息</h1>
        <form class="layui-form" id="addForm">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th style="text-align: center; width: 100px;">商品名称</th>
                    <td style="padding: 0">
                        <input id="goodName" type="text" name="goodName" lay-verify="title" class="layui-input">
                    </td>
                </tr>

                <tr>
                    <th style="text-align: center; width: 100px;">所属种类</th>
                    <td style="padding: 0">
                        <div class="layui-input-block" style="margin-left: 0px">
                            <select name="categoryId" id="categoryId">

                            </select>
                        </div>
                    </td>
                </tr>

                <tr>
                    <th style="text-align: center; width: 100px;">销售价格</th>
                    <td style="padding: 0">
                        <input id="salePrice" type="text" name="salePrice" lay-verify="title" class="layui-input">
                    </td>
                </tr>

                <tr>
                    <th style="text-align: center; width: 100px;">剩余数量</th>
                    <td style="padding: 0">
                        <input id="remainingCount" type="text" name="remainingCount" lay-verify="title" class="layui-input">
                    </td>
                </tr>

                <tr>
                    <th style="text-align: center; width: 100px;">商品图片</th>
                    <td style="padding: 0">
                        <div class="layui-upload-drag" id="test10">
                            <div class="layui-input-block" style="margin-left: 0px">
                                <i class="layui-icon"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                            </div>
                            <div class="layui-hide layui-input-block" style="margin-left: 0px" id="uploadDemoView">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center; margin: 0">
                    <input type="button" value="立即提交" class="layui-btn" onclick="add()"></input>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
        <h1>&nbsp;</h1>
        <h1>&nbsp;</h1>
    </div>
    <div class="layui-col-md3">

    </div>
</div>
</body>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

<script>

    $.ajax({
        type: "POST",
        url: "goods/findAllType",
        success: function(data){
            for (var i = 0; i < data.length; i++) {
                $("#categoryId").append("<option value="+data[i].categoryId+">" + data[i].categoryName + "</option>");
            }
            layui.form.render();//渲染页面
        }
    });
</script>
<script>

    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
        // ,element = layui.element
        // ,layer = layui.layer;

        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: 'goods/uploadPic'
            ,done: function(res){
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.msg);
                console.log(res)
            }
        });
    });


    function add() {
        $.ajax({
            type: "POST",
            url: "goods/addByGoods",
            data: $("#addForm").serialize(),
            success: function(msg){
                layer.alert('用户添加成功');
            }
        });
    }
</script>


</html>